<template>
  <div class="ue-1">
    <div id="player" @mousedown="xxx()">
      <!-- <div id="videoPlayOverlay"></div> -->
      <video
        id="streamingVideo"
        playsinline
        autoplay
        style="width: 100%; height: 100%; object-fit: fill"
      />
    </div>

    <van-config-provider theme="dark">
      <van-button
        round
        icon="plus"
        color="linear-gradient(135deg, #FAB2FF 10%, #1904E5 100%)"
        class="plus-class"
        @click="handleOpenOverlay"
      ></van-button>
      <div class="van-haptics-feedback">
        <van-button round @click="handleChangeSkin" class="skin-class"
          >跳</van-button
        >
      </div>
      <van-button round @click="onChangeMaterials" class="day-night-class"
        >切</van-button
      >
      <!-- <van-button
        round
        :icon="iconStatus"
        @click="handleChangeDayOrNight"
        class="day-night-class"
      /> -->
      <van-overlay :show="showOverlay">
        <div class="wrapper-box" @click="closeOverlay">
          <div class="wrapper" @click.stop>
            <van-row justify="space-around">
              <van-col span="14">
                <van-button plain type="primary" @click="handleClick">
                  更换分辨率
                </van-button>
              </van-col>
              <van-col span="8">
                <van-popover
                  v-model:show="showPopover"
                  theme="dark"
                  :actions="sexList"
                  @select="onSelectSex"
                >
                  <template #reference>
                    <van-button plain type="success">切换性别</van-button>
                  </template>
                </van-popover>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-overlay>
      <van-action-sheet
        v-model:show="show"
        :actions="actions"
        cancel-text="取消"
        description="选择分辨率"
        close-on-click-action
        @select="onSelect"
      />
    </van-config-provider>
  </div>
</template>

<!-- <script>
export default {
  name: "ue4Player",
  methods: {
    xxx() {
      //console.log('123');
    },
  },
};
</script> -->
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { showToast } from "vant";
import {
  app_load,
  api_send,
  api_setRes_send,
  api_setSex_send,
  api_register,
  api_unregister,
  inputOptions,
  api_close,
} from "@/utils/ueTool/ue4Player/app";

onMounted(() => {
  // 监听 resize 方法
  window.addEventListener("resize", renderResize, false);
  // app_load("5.5.5.31:80", () => {
  app_load("172.17.2.2:80", () => {
    // app_load("5.5.5.142:80", () => {
    console.log("画面出现之前的回调，可进行一些初始操作");
    console.log("🚀 ~ file: ueDemo.vue:268 ~ inputOptions", inputOptions);
    // inputOptions.fakeMouseWithTouches = true;
  });
  // if (isConnecting) {
  //   console.log("链接失败");
  // }
  // api_register("onUE4Call", (info) => {
  //   console.log(info);
  // });
  api_register("CubeMesh_5", (info) => {
    showToast("UE场景CubeMesh_5发送msg：" + info);
    console.log("CubeMesh_5", info);
  });
});
onUnmounted(() => {
  // 移除监听
  window.removeEventListener("resize", renderResize, false);
  // 销毁
  api_close();
});

const renderResize = () => {
  // 判断横竖屏
  let width = document.documentElement.clientWidth;
  let height = document.documentElement.clientHeight;
  if (width > height) {
    showToast("横屏模式");
  } else {
    showToast("竖屏模式");
  }
  // 做页面适配
  // 注意：renderResize 方法执行时虚拟 dom 尚未渲染挂载，如果要操作 vue 实例，最好在this.$nextTick()里进行。
};

const xxx = () => {};
const show = ref(false);
const showOverlay = ref(false);
const actions = [
  {
    name: "4k",
    subname: "超高清",
    value: {
      width: "3840",
      height: "2160",
    },
  },
  {
    name: "1080P",
    subname: "超清",
    value: {
      width: "1920",
      height: "1080",
    },
  },
  {
    name: "720P",
    subname: "高清",
    value: {
      width: "1280",
      height: "720",
    },
  },
];

const handleOpenOverlay = () => {
  showOverlay.value = !showOverlay.value;
};
const closeOverlay = () => {
  showOverlay.value = !showOverlay.value;
};

const onSelect = (item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
  showOverlay.value = !showOverlay.value;
  showToast("当前选择了" + item.name + "画质");
  api_setRes_send(item.value.width, item.value.height);
};

const handleClick = () => {
  console.log(" handleClick");
  show.value = !show.value;
};

const showPopover = ref(false);
const sexList = [{ text: "男" }, { text: "女" }];
const onSelectSex = (item) => {
  console.log("🚀 ~ file: ueDemo.vue:378 ~ onSelectSex ~ item", item);
  if (item.text === "男") {
    api_setSex_send(0, 3);
  } else {
    api_setSex_send(0, 0);
  }
  closeOverlay();
};

const iconStatus = ref("eye-o");
const handleChangeDayOrNight = () => {
  if (iconStatus.value === "eye-o") {
    iconStatus.value = "closed-eye";
    showToast("当前切换了夜间");
    api_setSex_send(3, 1);
  } else {
    iconStatus.value = "eye-o";
    showToast("当前切换了白天");
    api_setSex_send(3, 0);
  }
};

const handleChangeSkin = () => {
  console.log("点击了跳跃");
  onClickTitle();
};

const onClickTitle = () => {
  console.log("onClickTitle");
  let data = {
    msg: "测试跳跃的消息传递",
  };
  api_send("jumpOne", data, (info) => {
    console.log("info", info);
    showToast("UE跳跃返回消息msg:" + info);
  });

  api_unregister("jumpOne");
};
const onChangeMaterials = () => {
  console.log("onChangeMaterials,前端发送");
  let data = {
    msg: "测试切换场景消息传递",
    code: "111",
  };
  api_send("SetMaterials", data, (info) => {
    console.log("info", info);
    showToast("UE场景返回消息msg：" + info);
  });
};
</script>

<style lang="scss" scoped>
.plus-class {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
}
.van-overlay {
  z-index: 3;
}
.skin-class {
  position: absolute;
  bottom: 15%;
  left: 20%;
  transform: translate(-50%);
  z-index: 2;
}
.day-night-class {
  position: absolute;
  bottom: 15%;
  right: 10%;
  transform: translate(-50%);
  z-index: 2;
}
.wrapper-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ue-1 {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
<style scoped>
#player {
  width: 100%;
  height: 100%;
  background: #242424;
  position: absolute;
  left: 0;
  top: 0;
}
#videoPlayOverlay {
  width: 100%;
  height: 100%;
  background: tomato;
  /* background-color: rgba(100, 100, 100, 0.7); */
  position: absolute;
  left: 0;
  top: 0;
  /* pointer-events: auto; */
  /* z-index: -10; */
}
</style>
